<template>
  <div class="wall-wrap">
    <div class="walls">
      <div class="column" v-for="(column, index) in list" :key="index">
        <div style="width: 100%" v-if="column.length">
          <div
            class="item"
            v-for="(cell, cellIndex) in column"
            :key="cellIndex"
            v-show="status === undefined || status === (roleKey ? cell.roleResult[roleKey] || 0 : cell.status)"
            :style="{ backgroundColor: colorLib[roleKey ? cell.roleResult[roleKey] || 0 : cell.status] }"
            @click="cellClick(cell)"
          >
            {{ cell.name }}
          </div>
        </div>
      </div>
    </div>
    <div class="bottom-box">
      <div>东</div>
      <div>南</div>
      <div>西</div>
      <div>北</div>
    </div>
  </div>
</template>
<script>
// 外立面
import { recordMixin } from './mixin'
export default {
  name: 'Walls',
  mixins: [recordMixin]
}
</script>
<style lang="scss" scoped>
.walls {
  text-align: center;
  display: flex;
  border-bottom: 1px solid #ccc;
}
.column {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  width: 25%;
  padding: 5px;
}
.item {
  height: 20px;
  line-height: 20px;
  margin-top: 5px;
  border-radius: 3px;
  color: white;
  overflow: hidden;
}
.bottom-box {
  display: flex;
  justify-content: space-around;
  height: 40px;
  line-height: 40px;
  color: #666;
  text-align: center;
}
</style>
